<template>
  <div>
    <h1>WebSocket</h1>
    <div v-for="item in reponseData" :key="item.id">
      {{ item }}
    </div>
    <h2 v-if="testnull !== null && testnull">11</h2>
    <h2 v-else>22</h2>
    <h2>当前等待的请求 {{ httpStore.getPendingNum() }}</h2>
    <h2>请求总数 {{ httpStore.getRequestSum() }}</h2>
    <button @click="testHttp">发送请求获取数据</button>
    <button @click="clearData">清空数据</button>
    <button @click="testWebSocket">切换websocket聊天室</button>
    <button @click="testWebSocketClose">关闭websocket</button>
    <button @click="testWebSocketData">切换websocket数据</button>

  </div>
</template>

<script setup>
import { ref,getCurrentInstance} from 'vue'
import useHttpStore from '../stores/http/index.js'
const httpStore = useHttpStore()
const { proxy } = getCurrentInstance()
const testnull = ref(true)
const testnull2 = ref(false)
const reponseData = ref([])

proxy.$websocket.initWebSocket()

const testHttp =()=>{

  console.log(httpStore.getPendingNum())
  proxy.$http.getTableData().then(res => {
    reponseData.value.push(res)
  })
}
const clearData =()=>{
  reponseData.value = []
}
//切换websocket
const testWebSocket =()=>{
  console.log('切换websocket')
  console.log(proxy.$websocket)
  proxy.$websocket.send({
    url:'/ws/chat', //切换url
    type:'sendMessage', //发送类型
    data:{
      message:'hello',
    }
  })
}

const testWebSocketData=()=>{
  console.log('切换websocket数据')
  console.log(proxy.$websocket)
  proxy.$websocket.send({
    url:'/ws/data', //切换url
    type:'sendData', //发送类型
    data:{
      message:'hello',
    }
  })
}

const testWebSocketClose=()=>{
  console.log('关闭websocket')
  console.log(proxy.$websocket)
  proxy.$websocket.close()
}



</script>